import { CONFIG } from '@/constants';
import { getUserHomepage } from '@/servers/api/userController';
import { FormattedMessage, history, useIntl, useLocation } from '@umijs/max';
import { Empty, Spin, Tabs, Typography } from 'antd';
import { useEffect, useState } from 'react';
import HomePageUserInfo from './homePageUserInfo';
type IParams = {
    id?: string;
};
const NewsForm: React.FC = () => {
    const intl = useIntl();
    const { Title } = Typography;
    const location = useLocation();
    const state = location.state as IParams;
    const [info, setInfo] = useState();
    const [infoList, setInfoList] = useState();
    const [loading, setLoading] = useState(false);
    const [currentTab, setCurrentTab] = useState('1');
    const items = [
        {
            label: <FormattedMessage id="推广"></FormattedMessage>,
            key: '1',
        },
        {
            label: <FormattedMessage id="竞标"></FormattedMessage>,
            key: '2',
        },
    ];
    const I18list = {
        goods: intl.formatMessage({ id: '货物' }),
        transport: intl.formatMessage({ id: '运输' }),
        exposure: intl.formatMessage({ id: '曝光台' }),
        crossborder: intl.formatMessage({ id: '跨境货代' }),
        professional: intl.formatMessage({ id: '专业代办' }),
        lifead: intl.formatMessage({ id: '生活广告' }),
    };
    function getData() {
        setLoading(true);
        getUserHomepage({
            user_id: state.id,
            type: currentTab,
        }).then((res) => {
            setLoading(false);
            setInfo(res.data.userInfo);
            const infoList = res.data.list;
            if (infoList === '1') {
                delete infoList['lifead'];
                delete infoList['exposure'];
            }
            setInfoList(infoList);
        });
    }
    function details(data: object, index: number, key: string) {
        history.push('/detail', {
            id: data?.id,
            type: parseInt(currentTab),
            releaseType: key,
        });
    }

    useEffect(() => {
        getData();
    }, []);
    useEffect(() => {
        getData();
    }, [currentTab]);
    return (
        <Spin spinning={loading}>
            <HomePageUserInfo info={info}></HomePageUserInfo>
            <Tabs
                defaultActiveKey="1"
                items={items}
                onChange={(e) => {
                    setCurrentTab(e);
                }}
            />
            {infoList &&
                Object.keys(infoList).map((key, index) => (
                    <div key={index}>
                        <Title level={5} style={{ margin: '30px 0' }}>
                            {I18list[key]}
                        </Title>
                        {infoList[key].length > 0 ? (
                            <>
                                {infoList[key].map((ele, index: number) => (
                                    <img
                                        onClick={() => {
                                            details(ele, index, key);
                                        }}
                                        style={{
                                            width: 200,
                                            height: 200,
                                            margin: '0 10px',
                                            cursor: 'pointer',
                                        }}
                                        key={index}
                                        src={CONFIG.IMAGE_URL + ele.images[0]}
                                    />
                                ))}
                            </>
                        ) : (
                            <Empty
                                description={
                                    <FormattedMessage id="没有数据"></FormattedMessage>
                                }
                            ></Empty>
                        )}
                    </div>
                ))}
        </Spin>
    );
};
export default NewsForm;
